<template>
	<view class="login_page">
		<view class="header">
			<view class="logo">
				<image src="../../static/login/u39.png"/>
			</view> 
			<view class="title_cell">
				<uni-title type="h1" title="京山智慧水利—叶畈水库"  align="center" color="#fff"></uni-title> 
				<text>Intelligent water conservancy online monitoring platform</text>
			</view>
		</view>
		
		<view class="container">
			<view class="container_title">
				<view class="title_left">
					<view class="title_line"></view>
					<text>用户登录</text>
					<text>User Login</text>
				</view>
				<view class="title_right">登录说明</view>
			</view> 
			
			<view class="container_form">
				<view class="block">
					<view class="icon">
						<image src="../../static/login/mobile.png"/>
					</view>
					<view class="input">
						<input v-model="username" placeholder="请输入登录账户" type="text"/>
					</view>
				</view>
				<view class="block">
					<view class="icon">
						<image src="../../static/login/lock.png"/>
					</view>
					<view class="input">
						<input v-model="password" placeholder="请输入登录密码" password type="safe-password"/>
					</view>
				</view>
				<view class="block">
					<view class="icon">
						<image src="../../static/login/code.png"/>
					</view>
					<view class="input" >
						<input v-model="code" placeholder="请输入校验码" />
						<image class="input-icon" :src="codeImg" mode="aspectFit" @click="getCaptchaImage"/>
						<text class="change-img" @click="getCaptchaImage">换一个</text>
					</view>
				</view>
				<view class="button" @click="processLogin"><text>登录</text></view>
				<text class="forgot">忘记登录密码？</text>
			</view>
		</view>
	</view>
</template>

<script> 
import { getCaptcha, login } from '@/request/index';
export default {
	data() {
		return {  
			username: "",
			password: "",
			code: "",
			uuid: "",
			codeImg: require("../../static/login/验证码.png"),
		}
	},
    created() {
        let token = uni.getStorageSync("token");
        if (token != null && token != "") {
            uni.navigateTo({
                url: '/'
            });
        }
    },
    mounted() {
        this.getCaptchaImage();
    },
	methods: {
        getCaptchaImage() {
            let _this = this;
            getCaptcha().then(res => {
                console.log(res.code,res,"-----------")
                if (res.code == 200) {
                    _this.codeImg = "data:image/png;base64," + res.data.img;
                    _this.uuid = res.data.uuid;
                }
            }).catch((err) => {
                console.log(err)
            })
        },
        processLogin() {
            let _this = this;
            if (_this.code == null || _this.code == "") {
                uni.showToast({
                    title: '请填写验证码!',
                    icon: 'none'
                })
                return;
            }
            let params = {
                username: _this.username,
                password: _this.password,
                code: _this.code,
                uuid: _this.uuid
            }
            login(params)
                .then(res => {
                    if (res.code == 200) {
                        let token = res.data.token;
                        uni.setStorageSync("token", token);
                        uni.setStorageSync("username", _this.username);
                        uni.navigateTo({
                            url: '/'
                        });
                    } else {
                        // uni.showToast({
                        //     title: '账号或密码错误！',
                        //     icon: 'error'
                        // })
                        _this.getCaptchaImage();
                    }
                }).catch((err) => {
                    console.log(err)
                    // uni.showToast({
                    //     title: '访问接口失败',
                    //     icon: 'none'
                    // })
                    _this.getCaptchaImage();
                })
        },
	}
}
</script>

<style lang="scss">
.login_page {
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;

    .header {
        width: 100%;
        height: 36%;
        padding-top: 10%;
        box-sizing: border-box;
        background: url(../../static/login/Rectangle1.png) no-repeat 0 0/100% 100%;
        position: relative;

        .logo {
            position: absolute;
            top: 51%;
            width: 100vw;
            display: flex;
            justify-content: center;

            image {
                width: 70vw;
                height: 29vh;
            }
        }

        .title_cell {
            text-align: center;

            /deep/ .uni-h1 {
                font-size: 1.5rem;
            }

            text {
                font-size: 1.2rem;
                color: #ffffff90;
            }
        }
    }

    .container {
        margin-top: 11vh;
        padding: 1rem;

        .container_title {
            display: flex;
            justify-content: space-between;
            align-items: center;

        }

        .title_left {
            display: flex;
            align-items: center;

            text:nth-of-type(1) {
                font-size: 1rem;
                color: rgb(51, 51, 51);
                margin-right: 0.4rem;
                font-weight: bold;
            }

            text:nth-of-type(2) {
                font-size: 0.8rem;
                color: rgb(153, 153, 153);
            }
        }

        .title_right {
            font-size: 0.8rem;
            color: rgb(193, 193, 193);
        }

        .title_line {
            width: 4px;
            height: 14px;
            border-radius: 10px;
            margin-right: 6px;
            background-color: #2979ff;
        }

        .container_form {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .block {
            display: flex;
            align-items: center;
            height: 80rpx;
            width: 100%;
            border: 1px solid #e5e5e5;
            border-radius: 0.6rem;
            margin: 20rpx 0;
            position: relative;

            .icon {
                width: 80rpx;
                height: 80rpx;

                image {
                    margin: 20rpx 18rpx;
                    width: 40rpx;
                    height: 40rpx;
                }
            }

            .input {
                width: calc(640rpx - 80rpx);
                font-size: 14px;
                position: relative;

                input {
                    height: 80rpx;
                }

                .uni-input-placeholder {
                    color: #c1c1c1 !important;
                    font-size: 1rem;
                }

                .input-icon {
                    width: 160rpx;
                    height: 60rpx;
                    position: absolute;
                    right: 40rpx;
                    top: 50%;
                    transform: translateY(-50%);
                }

            }

            .change-img {
                position: absolute;
                height: 60rpx;
                line-height: 60rpx;
                transform: translateY(-50%);
                right: -40rpx;
                top: 50%;
                font-size: 14px;
                color: #3771F9;
            }

            .send-button {
                position: absolute;
                right: 0;
                top: 10rpx;
                height: 80rpx;
                width: 220rpx;
                text-align: center;
                line-height: 80rpx;
                font-size: 12px;
                color: #777;
                z-index: 99;
            }
        }

        .button {
            width: 100%;
            height: 80rpx;
            border-radius: 0.6rem;
            text-align: center;
            line-height: 80rpx;
            font-size: 16px;
            color: #fff;
            background: linear-gradient(to right, #0D96FE, #3771F9);
            margin: 1rem 0;

            &:active {
                background: #3771F9;
            }
        }

        .forgot {
            color: #0D96FE;
            font-size: 0.8rem;
            text-align: center;
        }
    }
}
</style>
